<template>
  <vxe-modal @close="cancel" title="选择人员" v-model="kjRyDuox" width="80%" append-to-body showFooter esc-closable show-zoom resize>
    <div style="height: 75vh; overflow-y: auto;">
      <!-- 顶部搜索 -->
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
        <el-form-item label="姓名" prop="name">
          <el-input
            v-model="queryParams.name"
            style="background-color: white !important;"
            placeholder="请输入姓名"
            clearable
            @keyup.enter.native="handleQuery"
            size="mini"
          />
        </el-form-item>
        <el-form-item label="熟悉领域" prop="sxLy">
          <el-select v-model="queryParams.sxLy" placeholder="请选择熟悉领域" clearable size="mini">
            <el-option
              v-for="dict in dict.type.rcpt_sxly"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="人员分类" prop="ryFl">
          <el-select v-model="queryParams.ryFl" placeholder="请选择人员分类" clearable size="mini">
            <el-option
              v-for="dict in dict.type.rcpt_ryfl"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="是否专家" prop="sfZj">
          <el-select v-model="queryParams.sfZj" placeholder="请选择是否专家" clearable size="mini">
            <el-option
              v-for="dict in dict.type.rcpt_sf"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>

      <!-- 列表 -->
      <el-table @row-click="clickRow" ref="table" :row-key="(row)=>{ return row.kjryId}" :reserve-selection="true"
                highlight-current-row :header-cell-style="{background:'#d0cece',color:'#000000',fontWeight:'bold'}"
                v-loading="loading" :data="kjryList" @selection-change="handleSelectionChange">
        <el-table-column :reserve-selection="true" type="selection" width="55" align="center"/>
        <el-table-column label="序号" align="center" type="index" width="50"/>
        <el-table-column label="姓名" align="center" prop="name" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="handleButtonClick(scope.row)"
            >
              <el-link type="primary">{{ scope.row.name }}</el-link>
            </el-button>
          </template>
        </el-table-column>
        <el-table-column label="性别" align="center" prop="sex" show-overflow-tooltip>
          <template slot-scope="scope">
            <dict-tag :options="dict.type.sys_user_sex" :value="scope.row.sex"/>
          </template>
        </el-table-column>
        <!--      <el-table-column label="出生日期" align="center" prop="csrq" width="120" show-overflow-tooltip>-->
        <!--        <template slot-scope="scope">-->
        <!--          <span>{{ parseTime(scope.row.csrq, '{y}-{m}-{d}') }}</span>-->
        <!--        </template>-->
        <!--      </el-table-column>-->
        <el-table-column label="年龄" align="center" prop="age"/>
        <el-table-column label="人员分类" align="center" prop="ryFl" show-overflow-tooltip width="120">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.rcpt_ryfl" :value="scope.row.ryFl"/>
          </template>
        </el-table-column>
        <el-table-column label="是否专家" align="center" prop="sfZj" show-overflow-tooltip>
          <template slot-scope="scope">
            <dict-tag :options="dict.type.rcpt_sf" :value="scope.row.sfZj"/>
          </template>
        </el-table-column>
        <el-table-column label="熟悉领域" align="center" prop="sxLy" show-overflow-tooltip>
          <template slot-scope="scope">
            <dict-tag :options="dict.type.rcpt_sxly" :value="scope.row.sxLy"/>
          </template>
        </el-table-column>
        <el-table-column label="所学专业" align="center" prop="sxZy" show-overflow-tooltip/>
        <el-table-column label="毕业院校" align="center" prop="byYx" show-overflow-tooltip/>
        <el-table-column label="职务" align="center" prop="zw" show-overflow-tooltip/>
        <el-table-column label="职称" align="center" prop="zc" width="120">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.rcpt_zc" :value="scope.row.zc"/>
          </template>
        </el-table-column>
        <el-table-column label="电话" align="center" prop="phone" show-overflow-tooltip/>
        <el-table-column label="QQ" align="center" prop="qq" show-overflow-tooltip/>
        <!--      <el-table-column label="是否在职" align="center" prop="sfZz" show-overflow-tooltip>-->
        <!--        <template slot-scope="scope">-->
        <!--          <dict-tag :options="dict.type.rcpt_sf" :value="scope.row.sfZz"/>-->
        <!--        </template>-->
        <!--      </el-table-column>-->
        <el-table-column label="所属单位" align="center" prop="ssDw" show-overflow-tooltip/>
      </el-table>

      <!-- 列表分页 -->
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />

    </div>

    <div slot="footer" class="dialog-footer dialog-footer-center">
      <el-button size="small" @click="submitForm">
        <svg-icon icon-class="confirm1" class-name='custom-class' />确 定
      </el-button>
      <el-button size="small" @click="cancel">
        <svg-icon icon-class="cancel1" class-name='custom-class' />取 消
      </el-button>
    </div>

    <!-- 点击姓名查看科研人员详情 -->
    <kjry-xq ref="kjryXq"></kjry-xq>
  </vxe-modal>
</template>

<script>
import {selectKjRyLabel} from "@/api/kjry/kjry";
import KjryXq from "@/views/kjry/kjry/components/kjryXq";

export default {
  name: "kjryDuoX",
  components: {KjryXq},
  //科技人员单选组件
  dicts: ['rcpt_sxly', 'rcpt_ryfl', 'sys_user_sex', 'rcpt_sf', 'process_business_status', 'rcpt_zc'],
  inject: ['updateKtZcRyLabel'],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 是否显示弹出层
      kjRyDuox: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        name: null,
        sxLy: null,
        ryFl: null,
        sfZj: null,
        userId: null,
        deptId: null,
      },
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      selectedRow: null, // 保存当前选中的行
      // 科技人员表格数据
      kjryList: [],
      kjRyLable: null,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      ktRyList: [],
    }
  },
  created() {
  },
  methods: {
    // 多选框选中数据
    handleSelectionChange(selection) {
      console.log(selection, 'saxsddas')
      this.ids = selection.map(item => item.kjryId)
      this.single = selection.length !== 1
      this.multiple = !selection.length
      this.ktRyList = selection.map(item => ({
        name: item.name,  //姓名
        age: item.age,    //年龄
        zhiWu: item.zw,   //职务
        zhiChen: item.zc, //职称
        zy: item.sxLy,    //专业
        gzDw: item.ssDw,   //工作单位
        kjryId: item.kjryId //科技人员ID
      }))
    },
    cancel() {
      this.kjRyDuox = false;
      this.$refs.table.clearSelection();
    },
    submitForm(){
      this.updateKtZcRyLabel(this.ktRyList)
      this.kjRyDuox = false;
      this.$refs.table.clearSelection();
    },
    handleOpen(data){
      // 接收来自父组件的数据
      this.kjRyLable = data
      this.kjRyDuox = true;
      this.getList();
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    // 查询科技人员列表
    getList() {
      this.loading = true;
      selectKjRyLabel(this.queryParams).then(response => {
        this.kjryList = response.rows;
        this.total = response.total;
        this.loading = false;

        // 默认选中已有的数据
        this.$nextTick(() => {
          this.kjRyLable.forEach(item => {
            const selectedRow = this.kjryList.find(row => row.kjryId == item.kjryId)
            if (selectedRow) {
              this.$refs.table.toggleRowSelection(selectedRow, true);
            }
          });
        });

      });
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    clickRow(row) {
      this.selectedRow = row; // 更新选中的行
      const table = this.$refs.table;
      table.toggleRowSelection(row);
    },
    //查询人员详情
    handleButtonClick(row) {
      this.$refs.kjryXq.handleOpen(row);
    },

  },
}
</script>

<style scoped>

</style>
